<template>
    <SubTitle>
        <template #subtitle>病虫害预警</template>
      </SubTitle>
    <!-- <div class="nymph" ref="nymph"></div> -->
    <div class="box">
      <div class="box1">
      <van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  :color="gradientColor"
  :fill="true"
  size="180px"
  text="6月20日"
  :stroke-width="100"
/>
<div class="text">一代蛾期预警</div>
</div>
<div class="box2">
      <van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  :color="gradientColor"
  :fill="true"
  size="180px"
  text="7月2日"
  :stroke-width="100"
/>
<div class="text">防治预警</div>
</div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  import SubTitle from './SubTitle.vue';
  import { ref, computed } from 'vue';
  export default {
    components:{
      SubTitle
    },
    setup() {
    const currentRate = ref(0);
    const gradientColor = {
      '0%': '#3fecff',
      '100%': '#6149f6',
    };
   
    return {
      currentRate,
      gradientColor,
    };
  },
 
  }
  </script>
  
  <style lang="less" scoped>
    .nymph{
      position: relative;
      width: 100%;
      height: 290px;

    }
    .text{
      text-align: center;
      border-top: 8px;
      color: #FFA500;
    }
    .box{
      padding-right: 40px;
      display: flex;
     justify-content: space-around;
  width: 100%;
  height: 280px;

}
.box1{
  margin-top: 30px;
  // margin-left: 30px;
  // float: left;
}
.box2{
  margin-top: 30px;
  // margin-left: 10px;
  // float: right;
}

    @media screen and (max-width: 720px) {
    .nymph{
      width: 100%;
      height: 300px;
    }
  }
  </style>
  <style>
.van-circle__text{
  color: aliceblue !important;
  font-size: 30px !important;
}
</style>